// 用于首页的顶栏
<template>
  <div class="Home_header">
    <img class="logo" @click="goHome" src="../assets/images/logo.png" />
    <div>
      <div class="navigation" style="margin-top:30px;margin-right:20px;">
        <span v-show="!username.username">
          <div>
            <span @click="login" class="account-login" style="color: black;cursor: pointer;"
              >登 录</span
            >
            |
            <span @click="login" class="account-register" style="color: black;cursor: pointer;"
              >注 册</span
            >
          </div>
        </span>
        <div v-show="username.username" style="margin-top:30px;">
          <span
            @click="login_over"
            style="color: black;cursor: pointer;margin-right:10px;"
            >退出</span
          >
          <span v-bind="username" style="width:100%;margin-right:10px;">
            {{ username.username }}
          </span>
          <span
            v-show="username.username"
            v-on:click="user_info"
            style="color: black;min-width:48px;cursor: pointer;margin-right:10px;"
            >个人信息</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: {
      }
    }
  },
  methods: {
    async fetch() {
      //   console.log(localStorage.token)
      const res = await this.$http.get('rest/flights')
      this.username = res.data
    },
    login() {
      this.$router.push('/login')
    },
    user_info() {
      this.$router.push('/useref')
    }, login_over() {
      localStorage.clear()
      this.$router.push('login')
    },
    goHome() {
      window.location.href='/'
    }
  },
  created() {
    this.fetch()
  },
}
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-family: "微软雅黑";
}

/* 头部的内容 */
.Home_header {
  min-width: 950px;
  height: 80px;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  /* border: 1px solid red; */

  .logo {
    align-items: center;
    cursor: pointer;
    height: 50px;
    width: 200px;
    display: block;
    margin: auto 20px;
  }

  /* 登录、注册 */

  /* 用户名 */

  /* 个人信息 */
}
</style>